<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    
    <!-- Bootstrap CSS -->
    <link href="/static/vendor/bootstrap/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap-Table CSS -->
    <link href="/static/vendor/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    
    
    <style>
        /* 主要内容区域 */
        body {
            font-family: 'Helvetica Neue', Arial, sans-serif;
            background-color: #f8f9fa;
            padding: 20px;
            margin: 0;
            height: 100%;
        }
        
        /* 工具栏样式 - 确保所有内容在一行 */
        #toolbar {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: nowrap;
            margin-bottom: 15px;
            padding: 10px;
            background: #fff;
            border-radius: 5px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        
        /* 滑动开关样式 */
        .switch-container {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .switch {
            position: relative;
            display: inline-block;
            width: 60px;
            height: 30px;
        }
        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #2c2c2c;
            transition: .4s;
            border-radius: 34px;
        }
        .slider:before {
            position: absolute;
            content: "";
            height: 22px;
            width: 22px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }
        input:checked + .slider:before {
            transform: translateX(30px);
        }
        .switch-label {
            font-weight: 500;
            color: #555;
        }
        .switch-label.active {
            font-weight: bold;
            color: #2c3e50;
        }
        
        #filter-group {
            background: #f8f9fa;
            padding: 0.5rem;
            border-radius: 6px;
        }
    
        /* 表格美化 */
        .fixed-table-container {
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 6px rgba(0,0,0,.05);
        }
        .bootstrap-table .table {
            margin-bottom: 0;
        }
        .table thead th {
            background: #2c3e50;
            color: white;
            border-color: transparent !important;
            font-weight: 600;
        }
        .table tbody tr:hover {
            background-color: #f8f9fa !important;
        }
        .table-striped tbody tr:nth-of-type(odd) {
            background-color: rgba(236, 240, 241,.3);
        }
    
        /* 复选框美化 */
        .form-check-input {
            cursor: pointer;
            margin-top: 0.15rem;
        }
        .form-check-label {
            cursor: pointer;
            user-select: none;
        }
    
        @media (max-width: 768px) {
            #toolbar {
                flex-wrap: wrap;
                gap: 1rem;
            }
        }
        .toast {
            background-color: rgba(255, 255, 255);
          }

          @media (max-width: 768px) {
            /* 表格字体大小调整为14px */
            #dataTable {
                font-size: 14px;
            }
            
            /* 调整表头字体大小 */
            #dataTable thead th {
                font-size: 13px;
            }
            
            /* 调整工具栏字体大小 */
            #toolbar {
                font-size: 14px;
            }
            
            /* 调整统计项字体大小 */
            .stat-label, .stat-value {
                font-size: 13px;
            }
            
            /* 调整工具栏行间距 */
            .toolbar-row {
                gap: 8px;
            }
            
            /* 调整复选框标签大小 */
            .form-check-label {
                font-size: 13px;
            }
        }
    </style>
</head>
<body>
    <!-- 工具栏（所有内容强制在一行） -->
    <div id="toolbar">
        <span>启动类型：</span>
        <div class="switch-container">
            <span class="switch-label" id="switch-label-single">单双</span>
            <label class="switch">
                <input type="checkbox" id="start-value">
                <span class="slider"></span>
            </label>
            <span class="switch-label active" id="switch-label-double">大小</span>
        </div>
        
        <span>连续筛选：</span>
        <div id="filter-group">
            <!-- 动态生成的复选框 -->
        </div>
    </div>


    <!-- Toast 容器 -->
    <div class="toast-container position-fixed top-0 end-0 p-3" style="z-index: 1100">
    <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
        <strong class="me-auto">系统提醒</strong>
        <small>刚刚</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body" id="toast_msg_box">
        </div>
    </div>
    </div>
    
    <!-- 表格 -->
    <table id="dataTable" class="data-table-1"></table>

    <!-- 依赖脚本 -->
    <script src="/static/vendor/jquery/jquery.min.js"></script>
    <script src="/static/vendor/bootstrap/bootstrap.bundle.min.js"></script>
    <script src="/static/vendor/bootstrap-table/bootstrap-table.min.js"></script>

    <script src="/static/common/main.js"></script>
    
    <script>
    $(function() {

        const urlParams = new URLSearchParams(window.location.search);
        const page = urlParams.get('page') || 0;

        var curNum = null; 
        var DT = 'ds';
        var TRANS, TRANS_DS;
        TRANS = TRANS_DS = {
            0: '双',
            1: '单'
        }
        var TRANS_DX = {
            0: '小',
            1: '大'
        }

        var URL ;

        var update_url = (reload) => {
            const checkedValues = [];
            $('.continuous-filter:checked').each(function() {
                checkedValues.push($(this).val());
            });
            var cs= checkedValues.join(',');

            URL = '/api/ffk3_mult_conn?type='+ DT +'&choices=' + cs + '&page=' + page;

            if (reload) {
                $('#dataTable').bootstrapTable('refresh', {
                    url: URL,
                    silent: true,
                });
            }
        }

        setInterval(() => {update_url(true)}, 10000);
        

                // 生成复选框
                let checkboxes = '';
                for(let i = 7; i <= 20; i++) {
                    checkboxes += `
                        <div class="form-check form-check-inline">
                            <input class="form-check-input continuous-filter" type="checkbox" 
                                   id="filter-${i}" value="${i}" ${i>=7?'checked':''}>
                            <label class="form-check-label" for="filter-${i}">${i}</label>
                        </div>
                    `;
                }
                $('#filter-group').append(checkboxes);

                update_url(false);

                $('.continuous-filter').change(function() {
                    update_url(true);
                })

        // 开关变化事件
        $('#start-value').change(function() {
            initVal = $(this).prop('checked');
            if (initVal) {
                DT = 'dx';
                TRANS = TRANS_DX;
            } else {
                DT = 'ds';
                TRANS = TRANS_DS;
            };
            update_url(true);
        });

        function play(num) {
            const toastLiveExample = document.getElementById('liveToast')
            const toast = new bootstrap.Toast(toastLiveExample)
            $('#toast_msg_box').html('当前期号：' + num + ' 已触发连续！')
            toast.show()

            playAudio();
            /* $('body').append(`
            <div style="display: none">
                <audio autoplay="autoplay">
                    <source src="/static/media/dingdong.wav" type="audio/wav"/>
                    <!--source src="system.mp3" type="audio/mpeg"/-->
                </audio>
            </div>
            `); */
        }

        // 初始化表格
        $('#dataTable').bootstrapTable({
            responseHandler: function (res, jqXHR) {
                res = res.rows;
                for (var row of res) {
                    
                    row['group'] = `<a href="#" onclick="window.parent.loadPage('pages/predict.html?page=`+page+`&group=`+row['group']+`', false)"> ` + row['group'] + `</a>`

                    if (row['conn'] >= 7) {
                        row['nump'] = row['num'] - row['conn'] + 7;
                    }
                    
                    row['next_num'] = row.num + 1;
                    
                    ['predict', 'value', 'next_predict'].map(function (x) {
                        row[x] = TRANS[row[x]];
                    });

                    
                    if (row['last']) {
                        col = 'success'
                    } else {
                        col = 'danger'
                    }

                    row['conn'] =  `<span class="badge fs-6 bg-`+ col + `">` + row['conn'] + `</span>`;

                    if (row['now']) {
                        row['num_desc'] = `<span class="badge bg-warning">` + row['num'] + `</span>`;
                        row['next_num'] = `<span class="badge bg-warning">` + row['next_num'] + `</span>`;
                    } else {
                        row['num_desc'] = row['num'];
                    }

                    if (row['now'] && row['num'] != curNum) {
                        curNum = row['num'];
                        play(row['num']);
                    }
                }
                return {
                    total: res.length,
                    rows: res,
                }
            },
            url: URL,
            toolbar: '#toolbar',
            columns: [{
                field: 'group',
                title: '小组',
            }, {
                field: 'num',
                title: '期号',
                visible: false,
            },  {
                field: 'num_desc',
                title: '期号',
            }, {
                field: 'nump',
                title: '7期',
                sortable: true,
            },  {
                field: 'predict',
                title: '预测'
            }, {
                field: 'value',
                title: '开盘'
            }, {
                field: 'next_num',
                title: '下期'
            }, {
                field: 'next_predict',
                title: '预测'
            }, {
                field: 'conn',
                title: '连续',
                sortable: true,
            }],
            filterControl: true,
             sortName: 'num', 
             sortOrder: 'desc', 

             // pagination: true,
             // sidePagination: 'server', // 服务端分页
             // pageNumber: 1,            // 初始页数
             // pageSize: 100,             // 每页记录数
             // pageList: [20, 100, 1000],  // 可选择每页记录数
        });


    });
    </script>
</body>
</html>